<template>
    <div id="subPage">
        <div class="top">
            <div class="list tab">
                <div class="search-left">
                    <Tabs v-model="tabActiveName" @on-click="tabChange">
                        <TabPane :label="`全部(${allNum})`" name="-1"></TabPane>
                        <TabPane :label="`待审批(${checkNum})`" name="0"></TabPane>
                        <TabPane :label="`待批准(${approvalNum})`" name="10"></TabPane>
                        <TabPane :label="`已通过(${successNum})`" name="20"></TabPane>
                        <TabPane :label="`已驳回(${failNum})`" name="11,21"></TabPane>
                    </Tabs>
                </div>
                <div class="search-right">
                    <div class="operationBox">
                        <div class="tableBtn" v-if="auth.isAdd" @click="addFine">
                            <div class="btnBox">
                                <span class="el-icon-circle-plus-outline" style="font-size:0.2rem;margin-right:0.1rem;cursor:pointer;"></span>
                                <div class="text">罚款单</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="list">
                <div class="item daterange">
                    <span class="name">罚款日期:</span>
                    <DatePicker
                        :editable='false'
                        type="daterange"
                        transfer
                        :options="options"
                        :clearable="false"
                        v-model="dateArr"
                        v-if="inputShow"
                        format="yyyy-MM-dd"
                        placement="top-start"
                        show-week-numbers
                        placeholder="请选择日期"
                        style="width: 250px;left:0;top:0;"
                        @on-change="getDateArr">
                    </DatePicker>
                    <DatePicker
                        type="daterange"
                        format="yyyy-MM-dd"
                        placement="top"
                        show-week-numbers
                        placeholder="请选择日期"
                        v-if="inputShow"
                        style="opacity:0;position: absolute;top:-9999px;width:1px;">
                    </DatePicker>
                </div>
                <div class="item">
                    <span class="name">被罚单位:</span>
                    <Input v-model="corpName" placeholder="请输入" style="width: 250px" clearable/>
                    <input type="password" autocomplete="new-password" style="display: none"/>
                </div>
                <div class="item">
                    <span class="name">制单人:</span>
                    <Input v-model="userName" placeholder="请输入" style="width: 250px" clearable/>
                    <input type="password" autocomplete="new-password" style="display: none"/>
                </div>
                <div class="item btnList">
                    <Button type="primary" @click="searchAll">搜索</Button>
                </div>
                <div class="item">
                    <Button @click="clear">重置</Button>
                </div>
                <div class="item">
                        <el-dropdown split-button  size="small" @click="clickExportFine">
                        数据导出
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="goEXP">导出记录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="tableBox">
                <div class="tableList">
                    <el-table ref="table" :data="list" style="width: 100%" height="100%" :stripe="true" @selection-change="handleSelectionChange">
                        <template slot="empty">
                            <div class="no_lsit" style="width:96%;margin:auto;">
                                <img src="./../../assets/images/common/rotary_nodata.png" style="width:3.9rem; height: 2.4rem;">
                            </div>
                        </template>
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column label="被罚单位" prop="corpName"></el-table-column>
                        <el-table-column label="制单人" prop="userName"></el-table-column>
                        <el-table-column label="罚款日期" prop="time"></el-table-column>
                        <el-table-column label="罚款金额" prop="money"></el-table-column>
                        <el-table-column label="状态" prop="state">
                            <template slot-scope="scope">
                                <span v-if="scope.row.state == 0" style="color:#FF4848">待审批</span>
                                <span v-if="scope.row.state == 10" style="color:#FFA64D">待批准</span>
                                <span v-if="scope.row.state == 20" style="color:#28D79C">已通过</span>
                                <span v-if="scope.row.state == 11 || scope.row.state == 21" style="color:#A9B0BB">已驳回</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="罚款说明" prop="remark">
                            <template slot-scope="scope">
                                <Tooltip  transfer :content="scope.row.remark?scope.row.remark:'—'" placement="top-start"  max-width='250'>
                                    <div style="width:200px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;cursor: pointer;color:#58595A;">{{scope.row.remark?scope.row.remark:'—'}}</div>
                                </Tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="getDetails(2, scope.row)" type="text" size="small" v-preventReClick="1500">详情</el-button>
                                <el-button v-if="auth.isCheck" @click.native.prevent="getDetails(3, scope.row)" type="text" size="small" :disabled="scope.row.state != 0" v-preventReClick="1500">审批</el-button>
                                <el-button v-if="auth.isApproval" @click.native.prevent="getDetails(4, scope.row)" type="text" size="small" :disabled="scope.row.state != 10" v-preventReClick="1500">批准</el-button>
                                <el-button v-if="auth.isDelete" style="color:red" @click.native.prevent="removeRow(scope.row.fineId)" type="text" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix pageFix" v-show="list.length>0">
                    <div class="float-right">
                        <Page v-if="totalCount" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="fineModal" :title="fineTitle" width="900px;" :mask-closable="false" class-name="msgModal" @on-visible-change='visibleChangeFn' :footer-hide="fineActive == 2 ? true : false">
            <div class="checkModal">
                <div class="list">
                    <h2>罚款信息</h2>
                    <div class="item">
                        <div class="left">
                            <span v-if="fineActive == 1" class="tip" style="color:red;">*</span>
                            <span class="span">被罚单位：</span>
                            <span style="width:300px;" v-if="fineActive != 1">{{ submitData.corpName }}</span>
                            <Select v-if="fineActive == 1" v-model="submitData.corpId" style="width:300px;height:36px;" placeholder="请选择" filterable @on-change="getCorpSelect">
                                <Option v-for="(item , index) in corpList" :value="item.corpId" :key="index">{{ item.corpName }}</Option>
                            </Select>
                        </div>
                        <div class="right">
                            <span v-if="fineActive == 1" class="tip" style="color:red;">*</span>
                            <span class="span">单位负责人：</span>
                            <span style="width:300px;" v-if="fineActive != 1">{{ submitData.corpUserName }}</span>
                            <Select v-if="fineActive == 1" v-model="submitData.corpUserId" style="width:300px;height:36px;" placeholder="请选择" filterable @on-change="getUserSelect">
                                <Option v-for="(item , index) in userList" :value="item.id" :key="index">{{ item.nickname + '    ' + item.phone }}</Option>
                            </Select>
                        </div>
                    </div>
                    <div class="item">
                        <div class="left">
                            <span v-if="fineActive == 1" class="tip" style="color:red;">*</span>
                            <span class="span">罚款日期：</span>
                            <span style="width:300px;" v-if="fineActive != 1">{{ submitData.time }}</span>
                            <DatePicker v-if="fineActive == 1" type="date" :options="options" :clearable="false" format="yyyy-MM-dd" v-model="submitData.time" placeholder="请输入" style="width: 300px;"></DatePicker>
                        </div>
                        <div class="right">
                            <span class="tip" v-if="fineActive != 2" style="color:red;">*</span>
                            <span class="span">罚款金额：</span>
                            <span style="width:300px;" v-if="fineActive == 2">{{ submitData.money +'元'}}</span>
                            <InputNumber v-if="fineActive != 2" :max="9999999999" :min="0" v-model="submitData.money" style="width: 288px;"></InputNumber>
                            <i style="font-style: normal" v-if="fineActive != 2">元</i>
                        </div>
                    </div>
                    <div class="item">
                        <div class="left item_com">
                            <span class="tip" v-if="fineActive != 2" style="color:red;">*</span>
                            <span class="span">罚款说明 ：</span>
                            <div class="textBox">
                                <Input v-if="fineActive != 2" type="textarea" placeholder="请输入" v-model="submitData.remark" :maxlength="200" show-word-limit style="width: 100%" clearable/>
                                <span style="width: 100%;" v-if="fineActive == 2">{{ submitData.remark }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="left item_com">
                            <span class="span">处理意见 ：</span>
                            <div class="textBox">
                                <Input type="textarea" v-if="fineActive != 2" placeholder="请输入" v-model="submitData.handleOpinion" :maxlength="200" show-word-limit style="width: 100%" clearable/>
                                <span style="width: 100%;" v-if="fineActive == 2">{{ submitData.handleOpinion ? submitData.handleOpinion : '—' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="item img">
                        <span style="margin-right:5px;white-space:nowrap;">图片说明 ：</span>
                        <div class="imgBox" v-if="fineActive == 1">
                            <el-upload :class="{hideAdd:imgFlag}" ref='uploadImg' :headers="headers"
                                       :action="$axios.defaults.baseURL+'/ms/api/quality/check/uploadImg'"
                                       list-type="picture-card" accept="image/png, image/jpg, image/jpeg"
                                       :before-upload="beforeIMgUpload" :on-success="imgSuccess" name="file" :limit=10
                                       :on-exceed="exceedImg" :on-remove="handleRemove">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                        </div>
                        <div style="flex:1;" class="img"
                             v-if='fineActive != 1&&submitData.imgUrls&&submitData.imgUrls.length > 0'>
                            <el-image style=" width: 80px;height: 80px;margin-right: 77px; margin-bottom: 10px;"
                                      :src="item" alt="" v-for="(item,i) in submitData.imgUrls" :key="i"
                                      :preview-src-list="submitData.imgUrls"></el-image>
                        </div>
                        <div class="img" v-if='fineActive != 1&&submitData.imgUrls&&submitData.imgUrls.length == 0'>—
                        </div>
                    </div>
                </div>
                <div class="list" v-if="fineActive == 2 && (state == 10 || state == 11)">
                    <h2>审批信息</h2>
                    <div class="item">
                        <div class="left">
                            <span class="span">审批结果:</span>
                            <span v-if="state == 10">已通过</span>
                            <span v-if="state == 11">已驳回</span>
                        </div>
                    </div>
                </div>
                <div class="list" v-if="fineActive == 2 && (state != 0 && state != 11 && state != 10)">
                    <h2>审批信息</h2>
                    <div class="item">
                        <div class="left">
                            <span class="span">审批结果:</span>
                            <span>已通过</span>
                        </div>
                    </div>
                </div>
                <div class="list" v-if="fineActive == 2 && (state != 0 && state != 11 && state != 10)">
                    <h2>批准信息</h2>
                    <div class="item">
                        <div class="left">
                            <span class="span">批准结果:</span>
                            <span v-if="state == 20">已通过</span>
                            <span v-if="state == 21">已驳回</span>
                        </div>
                    </div>
                </div>
                <div class="list" v-if="fineActive > 2&& (state != 20 && state != 21 && state != 10 && state != 11)">
                    <h2>审批信息</h2>
                    <div class="item">
                        <div class="left">
                            <span class="span">审批结果:</span>
                            <RadioGroup v-model="fineState"  filterable>
                                <Radio label="10">已通过</Radio>
                                <Radio label="11">已驳回</Radio>
                            </RadioGroup>
                        </div>
                    </div>
                </div>
                <div class="list" v-if="fineActive > 2 && state >= 10">
                    <h2>审批信息</h2>
                    <div class="item">
                        <div class="left">
                            <span class="span">审批结果:</span>
                            <span class="span" v-if="state == 10">已通过</span>
                            <span class="span" v-if="state == 11">已驳回</span>
                        </div>
                    </div>
                </div>
                <div class="list" v-if="fineActive > 3 && state == 10">
                    <h2>批准信息</h2>
                    <div class="item">
                        <div class="left">
                            <span class="span">批准结果:</span>
                            <RadioGroup v-model="fineState"  filterable>
                                <Radio label="20">已通过</Radio>
                                <Radio label="21">已驳回</Radio>
                            </RadioGroup>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submitBtn" type="primary" size="small" plain v-preventReClick="1500">提交</el-button>
            </div>
        </Modal>

        <Modal v-model="delModal" title="删除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要删除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button
                    @click="del"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                >确定
                </el-button>
            </div>
        </Modal>

        <Modal v-model="exportModal" title="导出" width="500px;" :mask-closable="false" class-name='addModal'
               :footer-hide="true">
            <div style="margin:20px auto;text-align: center;"><img src="../../assets/images/common/succes-iocn.png" style="width: 60px;height: 60px;display: block;margin: auto" alt=""></div>
            <div style="margin:20px auto;text-align: center;">导出任务已创建！</div>
            <div style="margin:20px auto;text-align: center;display: flex;justify-content: center;align-items: center;">
                <p>系统正在处理，请稍后到</p>
                <router-link to="/exp/list">导出记录</router-link>
                <p>下载。</p>
            </div>
        </Modal>
    </div>
</template>
<script>
import {
    getUserList,
    setSafetyFineAdd,
    getSafetyFineList,
    getSafetyFineNum,
    setSafetyFineDel,
    setSafetyFineComplete,
    exportFine,
} from "@/api/safety";
import {getCorpList_V1} from "@/api/mach";
import {initYMD} from '@/sever/utils'
export default {
    data() {
        return {
            headers: {
                Authorization:localStorage.getItem('COOKIE'),
            },
            exportModal:false,
            length: 32,
            options: {//时间配置参数
                disabledDate(date) {
                    return date && date.valueOf() > Date.now();
                }
            },
            dateArr: [new Date(new Date().getTime() - 7776000000), new Date(new Date().getTime())],//罚款日期
            corpName: '',// 被罚单位
            userName: '',// 制单人
            tabActiveName: '-1',//切换下标
            inputShow: false,//解决默认填充
            current: 1,//当前页面下标
            pageNum: "1",//分页下表
            pageSize: 10,//分页数量
            totalCount: 0,//已处理列表总数
            list: [],//数据列表
            btnList: [],//权限
            isAdd: true,//数据处理节流阀
            fineModal: false,//罚款弹框
            corpList: [],//被罚单位列表
            userList: [],//单位负责人列表
            submitData: {
                corpId: "",//被罚单位Id
                corpName: "",//被罚单位
                corpUserId: "",//单位负责人Id
                corpUserName: "",//单位负责人
                time: "",//罚款日期
                money: 0,//罚款金额
                handleOpinion: "",//处理意见
                remark: "",//罚款说明
                imgUrls: [],//图片说明
            },//数据提交
            imgFlag: false,
            projectId: "",//组织机构ID
            fineTitle: '罚款单详情',//弹框标题
            fineActive: 1,//操作下标
            allNum: 0,//全部总数
            checkNum: 0,//待审批
            approvalNum: 0,//待批准
            successNum: 0,//已通过
            failNum: 0,//已驳回
            delModal: false,//删除弹框
            removeId: '',//删除id
            fineState:'10',//审批批准状态
            state:"",//罚款单状态
            qualityIds:[],
            auth:{
                isAdd:false,
                isApproval: false,
                isCheck:false,
                isDelete: false,
            },
        }
    },
    methods: {
        initAuth(){
            this.auth.isAdd = this.btnList.includes('safety/fine/add')
            this.auth.isApproval = this.btnList.includes('safety/fine/approval')
            this.auth.isCheck = this.btnList.includes('safety/fine/check')
            this.auth.isDelete = this.btnList.includes('safety/fine/del')
        },
       goEXP(){
            this.$router.push({ path: "/exp/list" });
        },
       handleSelectionChange(val){
            this.qualityIds =[];
            val.forEach(i=>{
                this.qualityIds.push(i.fineId);
            })
        },
        clickExportFine(){
           if(this.qualityIds.length == 0) {
                this.$Modal.warning({
                    title: "提示",
                    content: "请勾选需要导出的数据",
                });
                return;
            }
            let str ='';
            for (var i = 0; i < this.qualityIds.length; i++) {
                str += this.qualityIds[i] + ",";
            }
            //去掉最后一个逗号(如果不需要去掉，就不用写)
            if (str.length > 0) {
                str = str.substr(0, str.length - 1);
            }
            let params={
                 deptId:this.projectId,
                 fineIds:str,
            }
            exportFine(params).then(res =>{
               if(res.code == 200) {
                    this.exportModal = true;
                    this.getAllList();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch(error=>{
                console.log(error)
            })
        },
        //数据提交
        submitBtn() {
            if (this.submitData.corpId == '') {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择被罚单位"
                });
                return;
            }
            if (this.submitData.corpUserId == '') {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择单位负责人"
                });
                return;
            }
            if (!this.submitData.money) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "罚款金额不能为0"
                });
                return;
            }
            if (this.submitData.money < 0.01) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "罚款金额不能小于0.01"
                });
                return;
            }
            if (this.submitData.remark == '') {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请填写罚款说明"
                });
                return;
            }
            let params = {};
            if(this.fineActive == 1){
                params = this.submitData;
                params.deptId = this.projectId;
            }else{
                params.fineId = this.submitData.fineId;
                // params.state = this.state;
                params.state = this.fineState;

                params.money = this.submitData.money;
                params.remark = this.submitData.remark;
                params.handleOpinion = this.submitData.handleOpinion;
            }
            this.save(JSON.stringify(params))
        },
        //数据提交到数据库
        save(params) {
            params = JSON.parse(params);
            if (params.time) {
                params.time = initYMD(params.time)
            }
            if(this.fineActive == 1){
                setSafetyFineAdd(params).then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.fineModal = false;
                        this.pageNum = 1;
                        this.current = 1;
                        this.getAllList();
                        this.getSafetyFineNumFn();

                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                    .catch(error => console.log(error))
            }else{
                setSafetyFineComplete(params).then(res => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功");
                        this.fineModal = false;
                        this.getAllList();
                        this.getSafetyFineNumFn();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                    .catch(error => console.log(error))
            }
        },
        //删除图片
        handleRemove(res, fileList) {
            this.submitData.imgUrls = [];
            fileList.forEach(v => {
                this.submitData.imgUrls.push(v.response.data)
            })
        },
        //图片上传成功
        imgSuccess(res) {
            this.submitData.imgUrls.push(res.data);
        },
        //图片上传前检验
        beforeIMgUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$Message.error("上传图片大小不能超过 2MB!");
            }
            return isLt2M;
        },
        exceedImg(files, fileList) {
            if (this.submitData.imgUrls.length == 10) {
                this.$Message.warning('上传图片最多10张');
                return;
            }
        },
        //数据添加弹框显示
        addFine() {
            this.isAdd = true;
            this.fineModal = true;
            this.fineActive = 1;
            this.fineTitle = '添加罚款单';
            this.submitData = {
                corpId: "",//被罚单位Id
                corpName: "",//被罚单位
                corpUserId: "",//单位负责人Id
                corpUserName: "",//单位负责人
                time: new Date(),//罚款日期
                money: 0,//罚款金额
                handleOpinion: "",//处理意见
                remark: "",//罚款说明
                imgUrls: [],//图片说明
            };
            this.getUser();
            this.getCorpListFn();
        },
        //弹框关闭事件
        visibleChangeFn(e) {
            if (!e) {
                if(this.$refs.uploadImg){
                    this.$refs.uploadImg.clearFiles();
                }
            }
        },
        //获取罚款单位
        getCorpSelect(index) {
            this.corpList.forEach((v, i) => {
                if (index == v.corpId) {
                    this.submitData.corpId = v.corpId;
                    this.submitData.corpName = v.corpName;
                }
            })
        },
        //获取单位负责人
        getUserSelect(index) {
            this.userList.forEach((v, i) => {
                if (index == v.id) {
                    this.submitData.corpUserId = v.id;
                    this.submitData.corpUserName = v.nickname;
                }
            })
        },
        getDateArr(i, v) {
            this.pageNum = 1;
            this.current = 1;
            this.dateArr = i;
            this.getAllList();
            this.getSafetyFineNumFn();
        },
        // 切换处理函数
        tabChange(item) {
            this.tabActiveName = item;
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },

        searchAll() {
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
            this.getQualityFineNumFn();
        },
        clear() {
            this.corpName=null
            this.userName=null
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
            this.getQualityFineNumFn();
        },
        // searchUserName() {
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();
        //     this.getSafetyFineNumFn();
        // },
        // searchCorpName() {
        //     this.pageNum = 1;
        //     this.current = 1;
        //     this.getAllList();
        //     this.getSafetyFineNumFn();
        // },
        //获取用户列表
        getUser() {
            let params = {
                deptId: this.projectId
            }
            getUserList(params).then((res) => {
                if (res.code == 200) {
                    this.userList = res.data;
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch((err) => {

            });
        },
        //获取单位列表
        getCorpListFn() {
            let params = {
                deptId: this.projectId
            };
            getCorpList_V1(params)
                .then(res => {
                    if (res.code == 200) {
                        this.corpList = res.data.list;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //删除数据
        del() {
            setSafetyFineDel(this.removeId).then((res) => {
                if (res.code == 200) {
                    this.delModal = false;
                    this.pageNum = 1;
                    this.current = 1;
                    this.getAllList();
                    this.getSafetyFineNumFn();
                } else {
                    this.$Message.warning(res.msg);
                }
            }).catch((err) => {
                console.log(err)
            });
        },
        //删除数据弹框显示
        removeRow(id) {
            this.delModal = true;
            this.removeId = id;
        },
        //获取列表数据
        getAllList() {
            let params = {
                deptId: this.projectId,
                corpName: this.corpName,
                userName: this.userName,
                startTime: initYMD(this.dateArr[0]),
                endTime: initYMD(this.dateArr[1]),
                state: this.tabActiveName == -1 ? '' : this.tabActiveName,
                pageSize: this.pageSize,
                pageNum: this.pageNum,
            }
            let resParams = {};
            for (let key in params) {
                if (params[key]) {
                    resParams[key] = params[key]
                }
            }
            getSafetyFineList(resParams)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //获取列表数据
        getSafetyFineNumFn() {
            let params = {
                deptId: this.projectId,
                corpName: this.corpName,
                userName: this.userName,
                startTime: initYMD(this.dateArr[0]),
                endTime: initYMD(this.dateArr[1]),
            }
            let resParams = {};
            for (let key in params) {
                if (params[key]) {
                    resParams[key] = params[key]
                }
            }
            getSafetyFineNum(resParams)
                .then(res => {
                    if (res.code == 200) {
                        this.allNum = res.data.allNum;//全部总数
                        this.checkNum = res.data.checkNum;//待审批
                        this.approvalNum = res.data.approvalNum;//待批准
                        this.successNum = res.data.successNum;//已通过
                        this.failNum = res.data.failNum;//已驳回
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //获取详情
        getDetails(active, row) {
            this.fineActive = active;
            this.state = row.state;
            this.submitData = row;
            if (this.fineActive == 2) {
                this.fineTitle = '罚款单详情';
            } else if (this.fineActive == 3) {
                this.fineTitle = '审批罚款单';
                this.fineState = '10';
            } else if (this.fineActive == 4) {
                this.fineTitle = '批准罚款单';
                this.fineState = '20';
            }
            this.fineModal = true;
        },
        //分页
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        treeExpand(data) {
            data.forEach(obj => {
                if (obj.name.indexOf(this.keyword) != -1) {
                    this.expandKeys.push(String(obj.partId))
                }
                if (obj.children instanceof Array) {
                    obj.children.forEach(v => {
                        if (v.name.indexOf(this.keyword) != -1) {
                            this.expandKeys.push(String(obj.partId))
                        }
                    })
                    this.treeExpand(obj.children)
                }
            })
            return data
        },
        collapseAll(arr, isExpand) {
            arr.forEach(i => {
                this.$refs.table.toggleRowExpansion(i, isExpand)
                if (i.children) {
                    this.collapseAll(i.children, isExpand)
                }
            })
        },
        //取消关闭集合
        cancel(active) {
            if (active == 1) {
                this.fineModal = false;
            } else if (active == 2) {
                this.delModal = false;
            }
        },
    },
    mounted() {
        this.projectId = this.$store.state.porjectObject.deptId;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.initAuth() //初始化权限
        this.getAllList();
        this.getSafetyFineNumFn();
        setTimeout(() => {
            this.inputShow = true;
        }, 1)
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        'submitData.imgUrls': {
            handler(val, oldVal) {
                //do something
                if (val.length == 10) {
                    this.imgFlag = true
                } else {
                    this.imgFlag = false

                }
            },
            deep: true
        },
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.projectId = val.deptId;
                this.deptName = val.name;
                this.pageNum = 1;
                this.current = 1;
                this.getAllList();
                this.getSafetyFineNumFn();

            }
        }
    },
}
</script>
<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/modal.less";
/deep/ .tableBox {
    position: relative;
    width: 100%;
    height: 100%;

    .pageFix {
        position: absolute;
        left: 50%;
        bottom: 8px;
        transform: translateX(-50%);
    }

    .tableList {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0 20px 70px 20px;
        box-sizing: border-box;
        margin: auto;

        .el-table--border::after, .el-table--group::after, .el-table::before {
            display: none;
        }

        .el-table {
            color: #333333;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            thead tr {
                border-radius: 6px !important;
                th {
                    padding: 12px 0;
                    color: #666666;
                    font-size: 14px;
                    font-family: Source Han Sans CN;
                }
            }
        }

        .el-table__row {
            background-color: #fff;
            cursor: pointer;
            font-size: 12px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #666666;
            border-bottom: 1px solid #eee;

            &.el-table__row--level-1,
            &.el-table__row--level-2 {
                background-color: #FAFCFC !important;
            }

            td {
                padding: 10px 0;
            }
        }

        .el-table--striped .el-table__body tr.el-table__row--striped td {
            background-color: #F5F5F5;
            cursor: pointer;
        }
    }
}

/deep/ .el-icon-circle-close {
    color: #fff !important;
}

#subPage {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    .top {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
        background: #fff;
        border-radius: 6px;
        .list {
            width: 100%;
            padding: 20px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            border-bottom: 1px solid #F3F3F3;
            box-sizing: border-box;

            &.tab {
                padding: 20px;
                box-sizing: border-box;

                /deep/ .search-left {
                    .ivu-tabs-bar {
                        border: none;
                    }

                    .ivu-tabs-bar {
                        width: 100%;
                        margin: 0 auto;
                        border: none;
                    }

                    .ivu-tabs-tab {
                        padding-top: 0 !important;
                        padding-bottom: 20px;
                        box-sizing: border-box;
                    }
                }

                .search-right {
                    flex: 1;
                    display: flex;
                    justify-content: flex-end;
                    align-items: flex-start;
                    margin-top: -15px;

                    .operationBox {
                        padding: 0;
                    }
                }
            }

            .item {
                height: 40px;
                margin-right: 20px;
                position: relative;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .name {
                    width: 80px;
                    font-style: 16px;
                }

                .sub {
                    flex: 1;
                }
            }
        }
    }
    .operationBox {
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .tableBtn {
            width: 120px;
            height: 35px;
            background: var(--themeColor);
            border-radius: 3px;
            text-align: center;
            line-height: 35px;
            box-sizing: border-box;
            color: #fff;
            cursor: pointer;

            .btnBox {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            &:hover {
                opacity: 0.7;
            }
        }
    }

    .bottom {
        width: 100%;
        height: calc(100% - 175px);
        border-radius: 6px;
        background-color: #fff;
        padding-top: 20px;
        box-sizing: border-box;
    }
}

/deep/ .checkModal {
    .list {
        width: 96%;
        margin: auto;

        &.rec_com {
            .left {
                width: 100%;

                .ivu-select {
                    flex: 1;
                }
            }

        }

        .item {
            position: relative;
            margin-left: 5%;
            margin-bottom: 20px;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;

            .left {
                .span {
                    width:80px;
                }

                &.item_com {
                    width: 100%;
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;

                    .textBox {
                        flex: 1;
                    }

                }
            }

            .right {
                .ivu-select-dropdown {
                    width: 300px !important;

                    .ivu-select-item {
                        width: 100% !important;
                        overflow: hidden !important;
                        text-overflow: ellipsis !important;
                        white-space: nowrap !important;
                    }
                }
            }

            &.switch {
                display: block;

                .top {
                    display: flex;
                    justify-content: space-between;

                    .readio {
                        width: 50%;
                    }
                }

                .bottom {
                    display: flex;
                    justify-content: space-between;

                    .ivu-select-dropdown {
                        width: 300px !important;

                        .ivu-select-item {
                            width: 100% !important;
                            overflow: hidden !important;
                            text-overflow: ellipsis !important;
                            white-space: nowrap !important;
                        }
                    }
                }

                .left,
                .right {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }

                .right {
                    margin-left: 40px;

                }

                .Select {
                    height: 100%;
                }

                .ivu-input {
                    padding: 0 5px;
                    height: 100%;
                }

                .ivu-select-selection {
                    height: 100%;
                }
            }

            .left,
            .right {
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;

            }

            &.img {

                display: flex;
                justify-content: flex-start;
                align-items: flex-start;

                .el-image {
                    &:nth-of-type(5n) {
                        margin-right: 0 !important;
                    }
                }
            }

            .avatar-uploader {
                flex: 1;
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                flex-wrap: wrap;
            }

            .el-upload--picture-card {
                width: 80px;
                height: 80px;
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
            }

            .avatar-uploader .el-upload:hover {
                border-color: var(--themeColor);
            }

            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 80px;
                height: 80px;
                line-height: 80px;
                text-align: center;
            }

            .el-upload--picture-card {
                line-height: 80px !important;
            }

            .avatar {
                width: 80px;
                height: 80px;
                display: block;
            }

            .el-upload-list--picture-card .el-upload-list__item {
                width: 80px !important;
                height: 80px !important;
                margin-right: 77px;
                margin-bottom: 10px;

                &:nth-of-type(5n) {
                    margin-right: 0px;
                }
            }
        }
    }
}

/deep/ .custom-tree-node {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;

    &:hover {
        .btn {
            visibility: visible !important;
        }
    }

    p {
        width: 75%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .title {
        flex: 1;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #244348;
        font-weight: Bold;
    }

    .sub {
        width: 21px;
        height: 21px;
        background: #F7DED6;
        opacity: 0.7;
        border-radius: 6px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #F36E65;
        line-height: 21px;
        text-align: center;
        margin-right: 5px;
    }

    .btn {
        width: 20%;
        height: 31px;
        line-height: 31px;
        text-align: center;
        display: flex;
        justify-content: space-between;
        align-items: center;
        //color: #F0F9FE;
        padding-right: 10px;
        box-sizing: border-box;
        visibility: hidden;
    }
}

/deep/ .ivu-page-next,
/deep/ .ivu-page-prev {
    width: 44px;
    height: 44px;
    background: #F8F9FB;
    border-radius: 4px;
    border: none !important;
    color: #9AA1A8 !important;
    line-height: 44px;

    a {
        font-size: 14px;
        color: #32585A;
    }
}

/deep/ .ivu-page-next:hover,
/deep/ .ivu-page-prev:hover {
    border-color: #089082 !important;
    color: #F36E65 !important;
}

/deep/ .ivu-page-item {
    width: 44px;
    height: 44px;
    border-color: transparent !important;
    background-color: #F8F9FB !important;
    line-height: 44px;

    a {
        font-size: 14px;
        color: #32585A;
    }
}

/deep/ .ivu-page-options-elevator {
    height: 44px;
}

/deep/ .ivu-page-options-elevator input {
    width: 67px;
    height: 44px;
    background: #F8F9FB;
    border: 2px solid #F8F9FB;
    border-radius: 4px;
}

/deep/ .ivu-page-item-active {
    border-color: transparent !important;
    background-color: #eee !important;
}

/deep/ .ivu-page-item-active a,
/deep/ .ivu-page-item-active:hover a {
    color: #32585A !important;
}

/deep/ .ivu-page-options-elevator input:focus {
    border-color: #070923 !important;
}

/deep/ .ivu-page-options-elevator:hover input {
    border-color: transparent !important;
}


/deep/ .ivu-tabs-tab {
    color: #333333 !important;
}

/deep/ .ivu-tabs-tab:hover {
    color: var(--themeColor) !important;
}

/deep/ .ivu-tabs-ink-bar {
    background-color: var(--themeColor) !important;
}

/deep/ .ivu-tabs-nav .ivu-tabs-tab-active {
    color: var(--themeColor) !important;
}


.searchAddress {
    width: 300px;
    position: absolute;
    top: 5px;
    left: 300px;
    display: flex;
    justify-content: space-between;
}

.hideAdd {
    /deep/ .el-upload--picture-card {
        display: none;
    }
}

/deep/.ivu-btn:hover {
    color: var(--themeColor);
    background-color: var(--themeColor2);
    border-color: var(--themeColor1);
}
/deep/.el-button:focus, /deep/.el-button:hover {
    color: var(--themeColor);
    border-color: var(--themeColor1);
    background-color: var(--themeColor2);
}
</style>
